<form [formGroup]="form">
  <ix-fieldset [title]="'Additional Details' | translate">
    <ix-details-table>
      <ix-details-item [label]="'Full Name' | translate">
        <ix-editable>
          <div view>
            {{ form.value.full_name }}
          </div>

          <div edit>
            <ix-input
              formControlName="full_name"
              [attr.aria-label]="'Full Name' | translate"
            ></ix-input>
          </div>
        </ix-editable>
      </ix-details-item>

      <ix-details-item [label]="'Email' | translate">
        <ix-editable>
          <div view>
            {{ form.value.email }}
          </div>

          <div edit>
            <ix-input
              formControlName="email"
              [attr.aria-label]="'Email' | translate"
            ></ix-input>
          </div>
        </ix-editable>
      </ix-details-item>

      <ix-details-item [label]="'Groups' | translate">
        <ix-editable>
          <div view>
            <div class="selected-group">
              @if (form.value.group) {
                {{ form.value.group }}
              } @else if (hasSharingRole()) {
                <ix-icon name="mdi-circle"></ix-icon>
                {{ 'New group' | translate }}
              }
            </div>

            @if (hasSharingRole()) {
              <div class="sharing-admins-group selected-group">
                <ix-icon name="mdi-circle"></ix-icon>
                truenas_sharing_administrators
                <br>
                <span class="admin-role-text">&nbsp;&nbsp;({{ 'for Sharing Admin role' | translate }})</span>
              </div>
            }
          </div>

          <div edit>
            <ix-checkbox
              formControlName="group_create"
              [label]="'Create New Primary Group' | translate"
            ></ix-checkbox>

            <ix-chips
              class="inlined-control"
              formControlName="groups"
              [label]="'Auxiliary Groups' | translate"
              [resolveValue]="true"
              [resolveOptions]="groupOptions$"
              [autocompleteProvider]="groupsProvider"
            ></ix-chips>
          </div>
        </ix-editable>
      </ix-details-item>

      <ix-details-item [label]="'UID' | translate">
        <ix-editable [emptyValue]="'Next Available' | translate">
          <div view>
            {{ form.value.uid }}
          </div>

          <div edit>
            <ix-input
              formControlName="uid"
              [attr.aria-label]="'UID' | translate"
            ></ix-input>
          </div>
        </ix-editable>
      </ix-details-item>

      <ix-details-item [label]="'Home Directory' | translate">
        <ix-editable>
          <div view>
            {{ form.value.home }}
          </div>

          <div edit>
            <ix-checkbox
              formControlName="create_home_directory"
              [label]="'Create New Home Directory' | translate"
            ></ix-checkbox>

            @if (form.value.create_home_directory) {
              <ix-explorer
                formControlName="home"
                [label]="'Home Directory' | translate"
                [nodeProvider]="treeNodeProvider"
                [canCreateDataset]="true"
              ></ix-explorer>

              <mat-checkbox
                formControlName="default_permissions"
                [ixTest]="['default-permissions']"
              >
                <span class="default-permissions">
                  {{ 'Default Permissions' | translate }}
                  <div>{{ '700 or owner - all, others - none' | translate }}</div>
                </span>
              </mat-checkbox>
            }
          </div>
        </ix-editable>
      </ix-details-item>

      <ix-details-item [label]="'Shell' | translate">
        <ix-editable>
          <div view>
            {{ form?.value?.shell || 'zsh' }}
          </div>

          <div edit>
            <ix-select
              formControlName="shell"
              [attr.aria-label]="'Shell' | translate"
              [options]="shellOptions$"
            ></ix-select>
          </div>
        </ix-editable>
      </ix-details-item>
    </ix-details-table>
  </ix-fieldset>
</form>
